<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background: #eee;
			}
			
		</style>
	</head>
	<body>
		<canvas id="canvas" width="600" height="1000"></canvas>
		<img id='thumb' src="avatar.jpg" style="display: none;">
		<script type="text/javascript">
			var canvas = document.getElementById('canvas');
			var ctx = canvas.getContext('2d');
			ctx.fillStyle = 'red'
			ctx.fillRect(0,0,100,100)
			ctx.strokeStyle = 'blue'
			ctx.lineWidth = 5
			ctx.strokeRect(10,10,100,100)
			ctx.beginPath()
			ctx.strokeStyle = 'red'
			ctx.lineWidth = 5
			ctx.moveTo(300,300)
			ctx.lineTo(400,400)
			ctx.lineTo(300,400)
			ctx.lineTo(300,300)
			ctx.stroke()
			ctx.fillStyle='yellow'
			ctx.fill();
			ctx.closePath()
			
		</script>
	</body>
</html>
